<!-- 折线图 -->
<style lang="stylus" scoped>
.multiple
  height 100px
  background-size 100% 100%
  .main
    width 100%
    height calc(100% - 100px)
    margin-top -15px
  .btn-base
    position absolute
    right 13%
    top 28px
  .btn-base
    z-index 999
</style>


<template>
<div class="multiple">
  <p class='titlemultiple' style='font-family:微软雅黑;font-size:16px;color:#0B903C;font-weight:bold;line-height:50px;'></p>
  <!-- <button class="btn-base">放大</button> -->
  <div class="main"></div>
</div>

</template>

<script>
import echarts from 'echarts'
import header from 'components/header/header'
import filter from 'components/filter/filter'
import axios from 'axios'
import bus from 'src/bus'
export default {
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      styleArr: [],
      myChart: {},
      name: ''
    }
  },
  methods: {
    _init() {
      this.legendArr = this.myChart.getOption().series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    }
  },
  created() {
    bus.$on('count', function(data) {
      var arr = localStorage.getItem('liandongdata');
      arr = arr.split(",");
      this.myChart = echarts.init(document.querySelector('.multiple .main'));
      this.myChart.setOption({
        title: {
          show: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: false
        },
        toolbox: {
          show: false
        },
        color: this.color,
        calculable: true,
        xAxis: [{
          axisLine: {
            show: false
          },
          nameLocation: 'end',
          nameGap: 20,
          nameRotate: 0,
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['rgba(11, 144, 60, 1)']
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(0, 115, 86, 1)',
              fontSize: 14
            }
          },
          name: '人数',
          type: 'value',
          nameTextStyle: {
            color: 'rgba(0,0,0, 1)'
          }
        }],
        yAxis: [{
          name: '地区',
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          nameTextStyle: {
            color: 'rgba(11, 144, 60, 1)'
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(0, 115, 86, 1)'
            }
          },
          data: arr
        }],
        series: [{
          name: name,
          stack: 'stack2',
          type: 'bar',
          data: data,
          barWidth: 16,
          barGap: 0,
          color: ['rgba(0,115,86, 1)'],
          itemStyle: {
            normal: {
              label: {
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value + "人";
                  } else {
                    return "";
                  }
                },
                show: true,
                color: 'rgba(0, 0, 0, 1)'
              }
            }
          }
        }]
      });
    });
  },
  components: {
    'v-header': header,
    'v-filter': filter
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.querySelector('.multiple .main'))
    this.myChart.on("click", function(params) {
      localStorage.setItem('areaname', params.name)
      localStorage.setItem('zhenname', params.name)
      // location.href = "/#/indexzhen?areaname=" + params.name;
      location.href = "/pingdingshan/vue/#/indexzhen?areaname=" + params.name;
    })
    $(".btn-base").on("click", function() {
      $(".table").show();
      var areaname = localStorage.getItem('areaname')
      $(".table iframe").attr("src", "/#/multipleda?areaname=" + areaname).show();
    })
    var areaname = localStorage.getItem('areaname');
    $(".titlemultiple").text(areaname + '重点人群分布')
    axios.get(this.GLOBAL.BASE_URL + '/a/sys/area/mapData?name=' + areaname).then((res) => {
    // axios.get('static/data/Datayexian.json').then((res) => {
      if (res) {
        var arr = [];
        var countarr = [];
        var compare = function (obj1, obj2) {
          var val1 = obj1.fangda - 0;
          var val2 = obj2.fangda - 0;
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        }
        res.data = res.data.sort(compare);
        $(res.data).each(function(index) {
          if (index < 5) {
            if (this.name !== areaname) {
              this.value = this.fangda;
              countarr[countarr.length] = this.value;
              arr[arr.length] = this.name;
            }
          }
        })
        localStorage.setItem('areadata', JSON.stringify(res.data));
        localStorage.setItem('liandongdata', arr);
        localStorage.setItem('zhenlist', arr);
        this.myChart.setOption({
          title: {
            show: true
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false
          },
          toolbox: {
            show: false
          },
          color: this.color,
          calculable: true,
          xAxis: [{
            axisLine: {
              show: false
            },
            nameLocation: 'end',
            nameGap: 20,
            nameRotate: 0,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#00AA5E'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(11, 144, 60, 1)',
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            name: name + '人数',
            type: 'value',
            nameTextStyle: {
              color: 'rgba(11, 144, 60, 1)',
              fontWeight: 'bold'
            }
          }],
          yAxis: [{
            name: '地区',
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#00AA5E'
              }
            },
            nameTextStyle: {
              color: 'rgba(0, 155, 86, 1)',
              fontWeight: 'bold'
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(11, 144, 60, 1)',
                fontWeight: 'bold'
              }
            },
            data: arr
          }],
          series: [{
            name: '重点人员',
            stack: 'stack2',
            type: 'bar',
            data: countarr,
            barWidth: 16,
            barGap: 0,
            color: ['rgba(0,115,86, 1)'],
            itemStyle: {
              normal: {
                barBorderRadius: [0, 5, 5, 0],
                label: {
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value + "人";
                    } else {
                      return "";
                    }
                  },
                  show: true,
                  color: '#00AA5E',
                  position: 'right',
                  fontWeight: 'bold'
                }
              }
            }
          }]
        });
        this._init()
      }
    });
  }
}

</script>
